<!--  -->
  <template>
  <div class="packingTable">
    <el-table :data="tableHeader" style="width: 100%" border>
      <el-table-column prop="shippingName" label="收货人名字" width="auto"></el-table-column>
      <el-table-column prop="shippingTel" label="收货人电话" width="auto"></el-table-column>
      <el-table-column prop="address" label="地址" width="auto"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="auto"></el-table-column>
    </el-table>
    <el-table :data="tableData" style="width: 100%" class="pd-20">
      <el-table-column prop="goodsname" label="商品名称" width="180"></el-table-column>
      <el-table-column prop="optionName" label="辅助单位" width="180"></el-table-column>
      <el-table-column prop="optionValue" label="总重量"></el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
      <el-table-column prop="realWeight" label="实际重量"></el-table-column>
      <el-table-column prop="quantity" label="商品总数量"></el-table-column>
        <el-table-column prop="realPrice" label="实际金额"></el-table-column>
      <el-table-column  label="操作" width="auto">
        <template slot-scope="scope">
          <el-button @click="handleEditor(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form">
        <el-form-item label="修改重量" :label-width="formLabelWidth">
          <el-input v-model="form.realWeight" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入的其他文件 例如：import moduleName from 'modulePath';
import { placeDetail, placeEdit } from "@/api/user.js";
export default {
  //import所引入的组件注册
  components: {},

  data() {
    return {
      tableHeader: [],
      dialogFormVisible: false,
      formLabelWidth: "100",
      tableData: [],
      form: {
        realWeight: ""
      }
    };
  },

  //监听属性
  computed: {},

  //监控data中的数据变化
  watch: {},

  //方法集合
  methods: {
    determine() {
      let data = {
        id: this.form.sortId,
        realWeight: this.form.realWeight
      };
      placeEdit(data).then(res => {
        console.log(res);
        if (res.code == 20000) {
          this.dialogFormVisible = false;
          this.$message({ type: "success", message: res.msg })
          this.init()
        } else {
          this.$message({ type: "warning", message: res.msg });
        }
      });
    },
    handleEditor(row) {
      console.log(row);
      this.dialogFormVisible = true;
      this.form.realWeight = row.realWeight;
      this.form.sortId = row.id;
    },
    init() {
      let id = this.tableHeader[0].sortId;
      placeDetail(id).then(res => {
        console.log(res)
        this.tableData = res.rows;
      });
    }
  },

  //生命周期 - 组件实例刚被创建
  beforeCreate() {},
  //创建完成 访问当前this实例
  created() {
    this.ruleForm = this.$route.query;
    console.log(this.ruleForm);
    this.tableHeader.push(this.ruleForm);
    console.log(this.tableHeader);
    this.init();
  },
  //挂载之前
  beforeMount() {},
  //挂载完成 访问DOM元素
  mounted() {},
  //更新之前
  beforeUpdate() {},
  //更新之后
  updated() {},
  //for keep-alive 缓存功能，组件被激活时调用
  activated() {},
  //for keep-alive 组件被移除时调用
  deactivated() {},
  //组件销毁之前调用
  beforeDestroy() {},
  //组件销毁之后调用
  destroyed() {}
};
</script>
<style lang='scss' scoped>
.packingTable {
  padding: 20px;
}
.pd-20{
    padding-top: 40px;
}
/* @import url(); 引入公共css类 */
</style>